<template>
    <section class="taskContent">
        <div class="left" style="">
              <span>待执行任务</span>
        </div>
        <div v-if="task.id" class="task_item">
          <div class="detail" >
              <el-col class="image_box" :span="1">
                <img class="image" src="../../static/img/party-logo.png" alt="">
              </el-col>
              <el-col :span="3">
                  <span class="detailLabel">任务名称:</span>
                  <span>{{task.name}}</span>
              </el-col>
              <el-col :span="5">
                  <span class="detailLabel">任务类型:</span>
                  <span>{{task.type}}</span>
              </el-col>
              <el-col :span="3">
                  <span class="detailLabel">任务时间:</span>
                  <span>{{task.taskYear ? task.taskYear+'年' : task.taskYear}}</span>
              </el-col>
              <el-col :span="4">
                  <span class="detailLabel">截止日期:</span>
                  <span>{{task.endTime}}</span>
              </el-col>
              <el-col :span="6">
                  <span class="detailLabel">任务内容:</span>
                  <span>{{task.content}}</span>
              </el-col>
              <el-col :span="2">
                <el-button type="primary" plain>查看当前任务</el-button>
              </el-col>
          </div>
        </div>
        <div v-else  class="task_item">
            <div class="no_task">暂无任务</div>
        </div>
    </section>
</template>

<script>
    export default {
        name: "TaskContent",
        watch:{

        },
        data() {

        },
        methods: {

        },
        created(){

        }
    }
</script>

<style scoped>
    /* .taskContent {
      overflow: hidden;
    } */
    .taskContent .task_item {
      display: flex;
      margin: 10px 0 0 23px;
      width: 98%;
      margin-right: 20px;
      height: 60px;
      line-height: 60px;
      border-radius: 5px;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      cursor: pointer;
      transition: all .4s;
    }
    .taskContent .task_item:hover {
        transform: translateY(-3px) scale3d(1.02,1.02,1.02);
        background-color: #a6eaf538;
        cursor: pointer;
    }
    .image_box {
      text-align: center;
      line-height: 68px;
    }
    .left {
      float: left;
      margin-bottom: 10px;
      width: 140px;
      margin-left: 23px;
      font-size: 18px;
      font-weight: bold;
      text-align: left;
    }
    .detail {
      flex: 1;
      text-align: left;
    }
    .detail span {
      font-weight: 700;
    }
    .detail .el-col span:nth-child(1) {
      font-weight: normal;
    }
    .no_task {
      width: 100%;
      text-align: center;
    }
    /* .taskContent .detail{
        height: 150px;
        width: 100%;
        line-height: 45px;
        padding: 0 18%;
        font-size: 16px;
        font-weight: bold
    }
    .taskContent .detail .detailLabel{
        color: grey;
        margin-right: 25px;
    } */

</style>
